<template>
  <div class="app-container">
    <div v-if="device !== 'mobile'">
      <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
        <el-form-item>
          <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
          <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
        </el-form-item>
      </el-form>

      <el-row :gutter="10" class="mb8">
        <el-col :span="1.5">
          <el-button
            type="primary"
            plain
            icon="el-icon-plus"
            size="mini"
            @click="handleAdd"
            v-hasPermi="['yjcz:emergencyHandleProcess:fbChannelScene:add']"
          >新增</el-button>
        </el-col>
        <el-col :span="1.5">
          <el-button
            type="success"
            plain
            icon="el-icon-edit"
            size="mini"
            :disabled="single"
            @click="handleUpdate"
            v-hasPermi="['yjcz:emergencyHandleProcess:fbChannelScene:edit']"
          >修改</el-button>
        </el-col>
        <el-col :span="1.5">
          <el-button
            type="danger"
            plain
            icon="el-icon-delete"
            size="mini"
            :disabled="multiple"
            @click="handleDelete"
            v-hasPermi="['yjcz:emergencyHandleProcess:fbChannelScene:remove']"
          >删除</el-button>
        </el-col>
        <el-col :span="1.5">
          <el-button
            type="warning"
            plain
            icon="el-icon-download"
            size="mini"
            @click="handleExport"
            v-hasPermi="['yjcz:emergencyHandleProcess:fbChannelScene:export']"
          >导出</el-button>
        </el-col>
        <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
      </el-row>

      <el-table v-loading="loading" :data="fbChannelSceneList" @selection-change="handleSelectionChange">
        <el-table-column type="selection" width="55" align="center" />
        <el-table-column label="主键" align="center" prop="pkId" />
        <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
          <template slot-scope="scope">
            <el-button
              size="mini"
              type="text"
              icon="el-icon-edit"
              @click="handleUpdate(scope.row)"
              v-hasPermi="['yjcz:emergencyHandleProcess:fbChannelScene:edit']"
            >修改</el-button>
            <el-button
              size="mini"
              type="text"
              icon="el-icon-delete"
              @click="handleDelete(scope.row)"
              v-hasPermi="['yjcz:emergencyHandleProcess:fbChannelScene:remove']"
            >删除</el-button>
          </template>
        </el-table-column>
      </el-table>

      <pagination
        v-show="total>0"
        :total="total"
        :page.sync="queryParams.pageNum"
        :limit.sync="queryParams.pageSize"
        @pagination="getList"
      />

      <!-- 添加或修改应急处置流程对话框 -->
      <el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
        <el-form ref="form" :model="form" :rules="rules" label-width="80px">
          <el-form-item label="发版id" prop="sceneFbId">
            <el-input v-model="form.sceneFbId" placeholder="请输入发版id" />
          </el-form-item>
          <el-form-item label="应用系统id" prop="sceneChannleId">
            <el-input v-model="form.sceneChannleId" placeholder="请输入应用系统id" />
          </el-form-item>
          <el-form-item label="应急处置场景表" prop="sceneId">
            <el-input v-model="form.sceneId" placeholder="请输入应急处置场景表" />
          </el-form-item>
          <el-form-item label="删除标志" prop="delFlag">
            <el-input v-model="form.delFlag" placeholder="请输入删除标志" />
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button type="primary" @click="submitForm">确 定</el-button>
          <el-button @click="cancel">取 消</el-button>
        </div>
      </el-dialog>
    </div>


<!--移动端部分代码-->
    <div v-if="device === 'mobile'">
      <van-tabs v-model="mobilePluginsProp.activeName">
        <van-tab title="公共应急场景" name="publicScene">
          <van-form>
            <van-field
              v-model="publicQueryParams.sceneName"
              name="sceneName"
              label="场景名称"
              placeholder="场景名称"
            />
            <div style="margin: 16px;">
              <!-- 居中 -->
              <van-row type="flex" justify="center">
                <van-col span="7">
                  <van-button style="width: 100%" round type="info" native-type="submit" @click="handlePublicQuery" icon="search">
                    搜索
                  </van-button>
                </van-col>
                <van-col span="1">
                </van-col>
                <van-col span="7">
                  <van-button style="width: 100%" round type="default" @click="resetPublicAndGetList" icon="replay">
                    重置
                  </van-button>
                </van-col>
                <van-col span="1">
                </van-col>
                <van-col span="7">
                  <van-button style="width: 100%" round type="primary" @click="mobilePublicAdd" v-hasPermi="['yjcz:emergencyHandleProcess:fbChannelScene:add']" icon="plus">
                    新增
                  </van-button>
                </van-col>
              </van-row>
            </div>
          </van-form>
          <!--      <van-list-->
          <!--        v-model="mobilePluginsProp.loading"-->
          <!--        :finished="mobilePluginsProp.finished"-->
          <!--        finished-text="没有更多了"-->
          <!--        @load="mobileGetList"-->
          <!--      >-->
          <van-collapse v-model="mobilePluginsProp.publicActiveNames">
            <van-swipe-cell v-for="item in sceneList">
              <van-collapse-item :title="'场景名称：' + item.sceneName" :key="item.pkId">
                <van-cell-group>
                  <van-cell :title="'应急场景名称：' + item.sceneName" />
                  <van-cell :title="'应急场景备注：' + (null == item.sceneRemark ? '无' : item.sceneRemark)" />
                </van-cell-group>
              </van-collapse-item>
              <template #right>
                <van-button square type="info" text="查看" icon="search" @click="mobilePublicEdit(item.pkId, 1)" />
                <van-button square type="primary" text="修改" v-hasPermi="['yjcz:emergencyHandleProcess:fbChannelScene:edit']" icon="edit" @click="mobilePublicEdit(item.pkId, 0)" />
                <van-button square type="danger" text="删除" v-hasPermi="['yjcz:emergencyHandleProcess:fbChannelScene:remove']" @click="handlePublicDelete(item)" icon="close" />
              </template>
            </van-swipe-cell>
          </van-collapse>
          <!--      </van-list>-->
          <van-pagination
            v-model="publicQueryParams.pageNum"
            :total-items="publicTotal"
            :show-page-size="publicQueryParams.pageSize"
            force-ellipses
            @change="getPublicSceneList"
          />
          <!--      <van-button block type="info" @click="mobileAdd" style="position: fixed; bottom: 0px; z-index: 2; left: 0px" icon="plus">-->
          <!--        新增-->
          <!--      </van-button>-->
        </van-tab>
        <van-tab title="个性化应急场景" name="userScene">
          <van-form>
            <fb-and-channel-select-picker
              ref="fbChannelPicker"
              :params="queryParams"
              fb-id-prop="sceneFbId"
              channel-id-prop="sceneChannleId"
            />
            <div style="margin: 16px;">
              <!-- 居中 -->
              <van-row type="flex" justify="center">
                <van-col span="7">
                  <van-button style="width: 100%" round type="info" native-type="submit" @click="handleQuery" icon="search">
                    搜索
                  </van-button>
                </van-col>
                <van-col span="1">
                </van-col>
                <van-col span="7">
                  <van-button style="width: 100%" round type="default" @click="resetAndGetList" icon="replay">
                    重置
                  </van-button>
                </van-col>
                <van-col span="1">
                </van-col>
                <van-col span="7">
                  <van-button style="width: 100%" round type="primary" @click="mobileAdd" v-hasPermi="['yjcz:emergencyHandleProcess:fbChannelScene:add']" icon="plus">
                    新增
                  </van-button>
                </van-col>
              </van-row>
            </div>
          </van-form>
          <!--      <van-list-->
          <!--        v-model="mobilePluginsProp.loading"-->
          <!--        :finished="mobilePluginsProp.finished"-->
          <!--        finished-text="没有更多了"-->
          <!--        @load="mobileGetList"-->
          <!--      >-->
          <van-collapse v-model="mobilePluginsProp.activeNames">
            <van-swipe-cell v-for="item in fbChannelSceneList">
              <van-collapse-item :title="item.sceneFbName + '.' + item.sceneChannelName + '.' + item.scene.sceneName" :key="item.pkId">
                <van-cell-group>
                  <van-cell :title="'发版名称：' + item.sceneFbName" />
                  <van-cell :title="'发版应用系统：' + item.sceneChannelName" />
                  <van-cell :title="'应急场景名称：' + item.scene.sceneName" />
                  <van-cell :title="'应急场景备注：' + (null == item.scene.sceneRemark ? '无' : item.scene.sceneRemark)" />
                </van-cell-group>
              </van-collapse-item>
              <template #right>
                <van-button square type="info" text="查看" icon="search" @click="mobileEdit(item.pkId, 1)" />
                <van-button square type="primary" text="修改" v-hasPermi="['yjcz:emergencyHandleProcess:fbChannelScene:edit']" icon="edit" @click="mobileEdit(item.pkId, 0)" />
                <van-button square type="danger" text="删除" v-hasPermi="['yjcz:emergencyHandleProcess:fbChannelScene:remove']" @click="handleDelete(item)" icon="close" />
              </template>
            </van-swipe-cell>
          </van-collapse>
          <!--      </van-list>-->
          <van-pagination
            v-model="queryParams.pageNum"
            :total-items="total"
            :show-page-size="queryParams.pageSize"
            force-ellipses
            @change="getList"
          />
          <!--      <van-button block type="info" @click="mobileAdd" style="position: fixed; bottom: 0px; z-index: 2; left: 0px" icon="plus">-->
          <!--        新增-->
          <!--      </van-button>-->
        </van-tab>
      </van-tabs>
    </div>
  </div>
</template>

<script>
import { listFbChannelScene, getFbChannelScene, delFbChannelScene, addFbChannelScene, updateFbChannelScene } from "@/api/yjcz/fbChannelScene";
import {mapState} from "vuex";
import VanFieldSelectPicker from "@/components/VantTools/VanFieldSelectPicker";
import FbAndChannelSelectPicker from "@/components/VantTools/FbAndChannelSelectPicker";
import {Dialog, Notify} from "vant";
import {delFbInfo} from "@/api/yjcz/fbInfo";
import {delScene, listScene} from "@/api/yjcz/scene";

export default {
  name: "FbChannelScene",
  computed: {
    ...mapState({
      device: state => state.app.device,
    })
  },
  components: { VanFieldSelectPicker, FbAndChannelSelectPicker },
  data() {
    return {
      // 遮罩层
      loading: true,
      // 唯一标识符
      uniqueId: "",
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      publicTotal: 0,
      // 应急处置流程表格数据
      fbChannelSceneList: [],
      sceneList: [],
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
      },
      publicQueryParams: {
        pageNum: 1,
        pageSize: 10
      },
      // 表单参数
      form: {},
      // 表单校验
      rules: {
      },
      fbList: [],
      channelList: [],
      mobilePluginsProp: {
        loading: false,
        finished: false,
        activeNames: [],
        publicActiveNames: [],
        activeName: 'publicScene'
      }
    };
  },
  created() {
    this.getPublicSceneList()
    this.getList();
    this.getFbInfoList()
  },
  activated() {
    const time = this.$route.query.t;
    if (time != null && time != this.uniqueId) {
      this.uniqueId = time;
      // this.queryParams.pageNum = Number(this.$route.query.pageNum);
      const type = this.$route.query.type
      if (type === 'publicScene') {
        Object.assign(this.publicQueryParams, {sceneName: this.$route.query.sceneName})
        this.getPublicSceneList()
      } else {
        Object.assign(this.queryParams, {
          sceneFbId: this.$route.query.fbId,
          sceneChannleId: this.$route.query.channelId
        })
        this.getList();
      }
    }
  },
  methods: {
    /** 查询应急处置流程列表 */
    getList() {
      this.loading = true;
      listFbChannelScene(this.queryParams).then(response => {
        this.fbChannelSceneList = response.rows;
        this.total = response.total;
        this.loading = false;
      });
    },
    getPublicSceneList() {
      this.loading = true;
      listScene(this.publicQueryParams).then(response => {
        this.sceneList = response.rows;
        this.publicTotal = response.total;
        this.loading = false;
      });
    },
    // 取消按钮
    cancel() {
      this.open = false;
      this.reset();
    },
    // 表单重置
    reset() {
      this.form = {
        pkId: null,
        sceneFbId: null,
        sceneChannleId: null,
        sceneId: null,
        delFlag: null
      };
      this.resetForm("form");
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    handlePublicQuery() {
      this.publicQueryParams.pageNum = 1;
      this.getPublicSceneList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm("queryForm");
      this.handleQuery();
    },
    // 多选框选中数据
    handleSelectionChange(selection) {
      this.ids = selection.map(item => item.pkId)
      this.single = selection.length!==1
      this.multiple = !selection.length
    },
    /** 新增按钮操作 */
    handleAdd() {
      this.reset();
      this.open = true;
      this.title = "添加应急处置流程";
    },
    /** 修改按钮操作 */
    handleUpdate(row) {
      this.reset();
      const pkId = row.pkId || this.ids
      getFbChannelScene(pkId).then(response => {
        this.form = response.data;
        this.open = true;
        this.title = "修改应急处置流程";
      });
    },
    /** 提交按钮 */
    submitForm() {
      this.$refs["form"].validate(valid => {
        if (valid) {
          if (this.form.pkId != null) {
            updateFbChannelScene(this.form).then(response => {
              this.$modal.msgSuccess("修改成功");
              this.open = false;
              this.getList();
            });
          } else {
            addFbChannelScene(this.form).then(response => {
              this.$modal.msgSuccess("新增成功");
              this.open = false;
              this.getList();
            });
          }
        }
      });
    },
    /** 删除按钮操作 */
    handleDelete(row) {
      const pkIds = row.pkId || this.ids;
      if (this.device === 'mobile') {
        Dialog.confirm({
          title: '确认删除应急处置信息',
          message: `是否确认删除【${row.sceneFbName}.${row.sceneChannelName}.${row.scene.sceneName}】的应急处置流程信息？`,
        }).then(() => {
          // on confirm
          return delFbChannelScene(pkIds);
        }).then(() => {
          this.getList()
          Notify({ type: 'success', message: '删除成功' });
        })
        return
      }
      this.$modal.confirm('是否确认删除应急处置流程编号为"' + pkIds + '"的数据项？').then(function() {
        return delFbChannelScene(pkIds);
      }).then(() => {
        this.getList();
        this.$modal.msgSuccess("删除成功");
      }).catch(() => {});
    },
    handlePublicDelete(row) {
      const pkId = row.pkId;
      Dialog.confirm({
        title: '确认删除公共应急场景',
        message: `是否确认删除名为【${row.sceneName}】的公共应急场景？`,
      }).then(() => {
        // on confirm
        return delScene(pkId);
      }).then(() => {
        this.getPublicSceneList()
        Notify({ type: 'success', message: '删除成功' });
      })
    },
    /** 导出按钮操作 */
    handleExport() {
      this.download('yjcz/fbChannelScene/export', {
        ...this.queryParams
      }, `fbChannelScene_${new Date().getTime()}.xlsx`)
    },


    mobileGetList (isResetPage) {
      if (isResetPage) {
        this.queryParams.pageNum = 1;
        this.fbChannelSceneList = []
      }
      this.getFbListCommon(this.fbChannelSceneList)
    },
    getFbListCommon (fbChannelSceneList) {
      this.mobilePluginsProp.loading = true
      listFbChannelScene(this.queryParams).then(response => {
        if (response.code == 200) {
          let rows = response.rows
          for (var i = 0; i < rows.length; ++ i) {
            fbChannelSceneList.push(rows[i])
          }
          this.total = response.total;
          this.mobilePluginsProp.loading = false;
          if (fbChannelSceneList.length === this.total) {
            this.mobilePluginsProp.finished = true
          } else {
            this.queryParams.pageNum ++
          }
        }
      });
    },
    resetAndGetList () {
      this.$refs.fbChannelPicker.resetSelect()
      this.queryParams.pageNum = 1
      this.getList()
    },
    resetPublicAndGetList () {
      Object.assign(this.publicQueryParams, {
        pageNum: 1,
        sceneName: null
      })
      this.getPublicSceneList()
    },

    mobileAdd () {
      const fbId = this.queryParams.sceneFbId
      const channelId = this.queryParams.sceneChannleId
      const params = {
        fbId: fbId,
        channelId: channelId
      }
      const url = '/yjcz/emergencyHandleProcess/add'
      this.$tab.openPage("新增应急处置流程", url, params);
    },
    mobilePublicAdd () {
      const url = '/yjcz/emergencyHandleProcess/addPublic'
      this.$tab.openPage("新增公共场景流程", url, {sceneName: this.publicQueryParams.sceneName});
    },
    mobileEdit (pkId, search) {
      const fbId = this.queryParams.sceneFbId
      const channelId = this.queryParams.sceneChannleId
      const params = {
        pkId: pkId,
        fbId: fbId,
        channelId: channelId,
        search: search
      }
      const url = `/yjcz/emergencyHandleProcess/${search == 1 ? 'search' : 'edit'}`
      this.$tab.openPage(`${search == 1 ? '查看' : '编辑'}应急处置流程`, url, params);
    },
    mobilePublicEdit (pkId, search) {
      const params = {
        pkId: pkId,
        search: search,
        sceneName: this.publicQueryParams.sceneName
      }
      const url = `/yjcz/emergencyHandleProcess/${search == 1 ? 'searchPublic' : 'editPublic'}`
      this.$tab.openPage(`${search == 1 ? '查看' : '编辑'}公共场景流程`, url, params);
    }
  }
};
</script>
